<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>工作打卡</title>
		<link rel="stylesheet" href="../css/mui.min.css">
		<link rel="stylesheet" href="../css/aliyun.css">
		<link rel="stylesheet" href="css/style.css">
		<link rel="stylesheet" href="css/index.css">
		<style>
			body{background: #fff;}
			[v-cloak] {display: none;}
			*{margin: 0;padding: 0;}
			ul,li{list-style: none;}
			#app{background: white;padding:50px 0px 40px;}
			/* head */
			.head{padding:20px 20px 20px;width: 100%;height: 90px; border-bottom: 1px solid #eee;}
			.head div{float: left;}
			.head .img{height: 50px;width: 50px;margin-right: 10px;border-radius: 50%;overflow: hidden;border: 1px solid #eee;}
			.head .img img{width: 100%;}
			.head .name{width: calc(100% - 70px);}
			.head .name p{line-height: 10px;margin: 12px 0;color: #444;}
			/* work_time */
			.work_time{padding: 20px 40px;height: 150px;position: relative;}
			.work_time p{color: #444;font-size: 15px;position: relative;height: 30px;line-height: 30px;}
			.work_time p i{display: block;position: absolute;top: 8px;left: -15px;width: 11px;height: 11px;border-radius: 50%;border: 1px solid #666;}
			.work_time span{width: 1px;height: 99px;position: absolute;top: 39px;left: 30px;background: #666;}
			/* upload_img */
			.upload_img{padding: 20px 20px;}
			.upload_img li>span{line-height: 70px;font-size: 15px;}
			.upload_img li img{width: 80px;height: 80px;margin: 10px 10px 0;padding: 3px;border-radius: 5px;border: 1px solid #eee;}
			.upload_img div{width: 70px;height: 60px;position: relative;border-radius: 10px;float: left;margin-right: 20px;}
			.upload_img div input{position: absolute;width: 70px;height: 70px;top: 0;left: 0;border-radius: 10px;opacity: 0;z-index: 9;}
			.upload_img div button{width: 70px;height: 70px;position: absolute;top: 0;left: 0;padding: 0;border: none;}
			.upload_img div button span{display: block;width: 70px;height: 70px;font-size: 60px;line-height: 70px;text-align: center;color: #666;}
			/* start_end */
			.start_end{width: 150px;height: 150px;background: dodgerblue;border-radius: 50%;margin: 50px auto 20px;box-sizing: border-box;padding: 50px 0;}
			.start_end p{line-height: 50px;text-align: center;color: white;font-size: 17px;}
			/* .start_end p:last-child{font-size: 14px;} */
		</style>
	</head>
	<body>
		<div id="app" v-cloak>
			<header class="mui-bar mui-bar-nav">
				<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
				<h1 class="mui-title">{{title}}</h1>
			</header>
			<div id="main">
				<div class="head">
					<div class="img"><img v-show="user_head_img != '' " :src="user_head_img" alt=""><img src="img/iii.jpg" v-show="user_head_img == ''" alt=""></div>
					<div class="name"><p>姓名: {{user_name}}</p><p>职位: {{user_position}}</p></div>
					<div style="clear: both;"></div>
				</div>
				<div style="clear: both;"></div>
				<div class="work_time">
					<p>开始时间：{{cleanBeginTime}} <i></i></p>
					<p style="color: #007AFF;margin-top: 20px; margin-bottom: 30px;">工作状态：{{work_status}}</p>
					<p>完成时间：{{cleanEndTime}} <i></i></p>
					<span></span>
				</div>
				<div class="upload_img">
					<li class="input_file" >
						<span>上传照片最多7张，单张不超过5M</span>
						<div><input type="file" accept='image/jpeg,image/jpg,image/png'><button type="button" class="mui-btn"><span class="iconfont icon-tupiantianjia"></span></button></div>
						<input class="hid" style="display: none;" type="text" name="Bwsck"  _value="">
					</li>
				</div>
				<div class="start_end" @click='start_work'>
					<p>{{btn_work_status}}</p>
					<!-- <p>{{hour | time}}:{{minute | time}}:{{second | time}}</p> -->
				</div>
				<p style="text-align: center;">{{location_mes}}打卡范围</p>
				<div @click='reload_location' style="width: 100px;height: 32px; border-radius: 15px;background: #eee;line-height: 34px;text-align: center;margin: 25px auto;font-size: 14px;color: #007AFF;">重新定位</div>
			</div>
			
			
		</div>
	</body>
	<script src="../js/mui.min.js"></script>
	<script src="../js/vue.min.js"></script>
	<script src="../js/jquery-3.1.0.js"></script>
	<script src="js/base.js"></script>
	<script src="js/tools.js"></script>
	<script src="js/date.js"></script>
	<script src="../js/vue-resource.js"></script>

	<script>
		window.onload = function() {

			mui.init({
				pullRefresh: {
					container: "#app", //下拉刷新容器标识，querySelector能定位的css选择器均可，比如：id、.class等
					down: {
						style: 'circle', //必选，下拉刷新样式，目前支持原生5+ ‘circle’ 样式
						color: '#1E90FF', //可选，默认“#2BD009” 下拉刷新控件颜色
						height: '60px', //可选,默认50px.下拉刷新控件的高度,
						range: '120px', //可选 默认100px,控件可下拉拖拽的范围
						offset: '45px', //可选 默认0px,下拉刷新控件的起始位置
						auto: false, //可选,默认false.首次加载自动上拉刷新一次 
						callback: function() {
							window.location.reload();
							mui.toast("刷新成功");
						} //必选，刷新函数，根据具体业务来编写，比如通过ajax从服务器获取新数据；
					}
				}
			});
			
			// 判断plus
			if (window.plus) {
				plusReady();
			} else {
				document.addEventListener('plusready', plusReady, false);
			}
			// 执行plus
			function plusReady() {
				if (localStorage.getItem("token")) {
					// 设置系统状态栏背景为蓝色
					plus.navigator.setStatusBarBackground("#eee");
					// 设置系统状态栏样式为浅色文字
					plus.navigator.setStatusBarStyle("dark");

				}
				var app = new Vue({
					el: "#app",
					data: {
						user_name:localStorage.getItem("user_name"),
						user_position:localStorage.getItem("user_position"),
						user_head_img:localStorage.getItem("user_head_img"),
						toilet_id:"",
						cleanId:"",
						is_no:'',
						location_mes:'',
						cleanBeginTime:'- - ：- -',
						cleanEndTime:'- - ：- -',
						imgarr:[],
						cleanPhoto:[],
						//------------------
						title:"",
						btn_work_status:"开始工作",
						work_status:"未开始工作"
						
					},
					watch:{
						cleanId:function(val){
							if(val != ''){
								if(app.cleanPhoto == ''){
									app.btn_work_status ='结束工作';
									app.work_status='工作中';
								}else{
									app.btn_work_status ='工作已完成';
									app.work_status='今日工作已完成';
								}
							}
						}
					},
					methods: {
						close_showWaiting(){
							setTimeout(function(){
								w.close();
							},15000)
						},
						location(){
							var jd=localStorage.getItem('toilet_jd');
							var wd=localStorage.getItem('toilet_wd');
							var jd_max=parseFloat(jd)+0.01;
							var jd_min=parseFloat(jd)-0.01;
							var wd_max=parseFloat(wd)+0.01;
							var wd_min=parseFloat(wd)-0.01;
							TOOL.location(function(jdd,wdd){
								if(jd_max > jdd && jdd > jd_min && wd_max > wdd && wdd> wd_min){
									// console.log("已在打卡范围内")
									app.is_no = 1;
									app.location_mes = '已进入';
								}else{
									// console.log("不在打卡范围内")
									app.is_no = 2 ;
									app.location_mes = '未进入';
								}
							})
						},
						reload_location(){
							this.location();
							if(this.is_no == 1){
								mui.toast("已进入打卡范围！")
							}else{
								mui.toast("未进入打卡范围！")
							}
						},
						find_work(){
							this.$http.post(TOOL.Host + "toiletCleanController/queryToiletByNowDate", {
									data: JSON.stringify({
										personId:localStorage.getItem('user_person_id'),
										toiletId:this.toilet_id
									})
								}, {
									emulateJSON: true,
									headers: {
										'sourceType': "APP"
									}
								})
								.then(function(res) {
									console.log(JSON.stringify(res.data));
									if(res.data.code==0){
										if(res.data.data){
											app.cleanId=res.data.data.cleanId;
											app.cleanBeginTime=res.data.data.cleanBeginTime;
											app.cleanEndTime=res.data.data.cleanEndTime;
											if(res.data.data.cleanPhoto){
												app.cleanPhoto=res.data.data.cleanPhoto;
												app.btn_work_status ='工作已完成';
												app.work_status='今日工作已完成';
											}
										}
									}
								}, function(res) {
									console.log(res)
								});
							
							
							
							
						},
						record_work(){
							var data={};
							if(this.cleanId != ''){
								if(this.imgarr == ''){
									mui.toast('请上传保洁图片！');
									w.close();
									return
								}
								if(this.imgarr.length > 7){
									mui.toast('上传图片已超过最大限制 ！');
									w.close();
									return
								}
								this.$http.post(TOOL.Host + "toiletCleanController/modifyToiletCleanByApp", {
										data: JSON.stringify({
											cleanId:this.cleanId,
											cleanPhoto:this.imgarr
										})
									}, {
										emulateJSON: true,
										headers: {
											'sourceType': "APP"
										}
									})
									.then(function(res) {
										console.log(JSON.stringify(res.data));
										if(res.data.code == 0){
											app.find_work();
											TOOL.setFire("html/index.html","end_upload_location");
											localStorage.setItem("upload_location","2");
											mui.toast('操作成功，保洁已完成');
											w.close();
										}else{
											mui.toast('上传失败，请重试！');
											w.close();
										}
									}, function(res) {
										console.log(res)
									});
								
								
								this.close_showWaiting();
							}else{
								
								this.$http.post(TOOL.Host + "toiletCleanController/saveToiletCleanByApp", {
										data: JSON.stringify({
											personId:localStorage.getItem('user_person_id'),
											toiletId:this.toilet_id
										})
									}, {
										emulateJSON: true,
										headers: {
											'sourceType': "APP"
										}
									})
									.then(function(res) {
										console.log(JSON.stringify(res.data));
										if(res.data.code==0){
											TOOL.setFire("html/index.html","start_upload_location");
											localStorage.setItem("upload_location","1");
											app.cleanId=res.data.data.cleanId;
											app.cleanBeginTime=res.data.data.cleanBeginTime;
										}else{
											mui.toast(res.mgs)
										}
										w.close();
									}, function(res) {
										console.log(res)
									});
								
								
								this.close_showWaiting();
							} 
						},
						start_work(){
							this.location();
							if(this.is_no == 1 && this.cleanPhoto == ''){
								w = plus.nativeUI.showWaiting( "",{"background":"rgba(0,0,0,0.3)","height":"60px"});
								this.record_work();
							}else if(this.is_no == 1 && this.cleanPhoto != ''){
								mui.toast('今日工作已完成，无需再打卡！')
							}else if(this.is_no != 1){
								mui.toast('未进入打卡范围！')
							}
						},
						
					},
					created() {  
						setTimeout(function(){
							plus.nativeUI.toast('请开启手机精确定位，否则会影响打卡定位准确度！',{'duration':'long'})
						})
						var current=plus.webview.currentWebview();
						this.title=current.title;
						this.toilet_id=current.toilet_id;
						
						this.find_work();
						this.location();
						setInterval(function(){
							app.location();
						},10000)
												
						//选择图片
						$(":file").change(function(e){
							var $file=$(this);
							var img_name=e.currentTarget.files[0].name;
							// console.log(img_name)
							if($file.val() != ''){
								var w = plus.nativeUI.showWaiting( "上传中...",{"background":"rgba(0,0,0,0.5)","height":"90px"});
								var $img=$(this).parent().siblings("img"),$li=$(this).parent().parent();
								BASE.yasuo($file,function(res){
									if(res != ''){
										var _res=res;
										app.imgarr.push(res);
										mui.toast("上传成功！");
										var img="<img src='"+ _res +"' _index='"+ ($file.parent().siblings("img").length) +"' >";
										$li.append(img);
										w.close();
										var img=$file.parent().siblings("input").val();
										if(img == ''){
											$file.parent().siblings("input").val(res.path);
										}else{
											var img_arr=img+"|"+res.path;
											$file.parent().siblings("input").val(img_arr);
										}
									}else{
										mui.toast("压缩图片失败");
										w.close();
									}
									
								})
							}
						});
						//删除图片
						$(document).on("click","img",function(){
							var _this=$(this);
							mui.confirm('确认删除已选图片吗?','删除图片',['取消','确认'],function (e) {
								if(e.index == 1){
									var index=_this.attr("_index");
									app.imgarr.splice(index,1);
									_this.remove();
								}
							},'div')
						});
						
						
					} 
				});//vue

			}
		}
	</script>
</html>
